<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" type="text/css" rel="stylesheet"/>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div class="slider_img_detail">
            <div class="slider_img_detail_bigger">
                <img src="img/001.jpg" alt=""/>
            </div>
            <div class="slider_img_detail_thumb">
                <ul>
                    <li id="img1" class="slider_img_detail_thumb_active" onclick="loadimg(1);"><a href="javascript:void(0);" title="http://192.168.1.100/shopcart/template/plugin/sliderdetail/img/001.jpg"><img src="img/thumn/001.jpg" alt=""/></a></li>
                    <li id="img2" onclick="loadimg(2);"><a href="javascript:void(0);" title="http://192.168.1.100/shopcart/template/plugin/sliderdetail/img/002.jpg"><img src="img/thumn/002.jpg" alt=""/></a></li>
                    <li id="img3" onclick="loadimg(3);"><a href="javascript:void(0);" title="http://192.168.1.100/shopcart/template/plugin/sliderdetail/img/003.jpg"><img src="img/thumn/003.jpg" alt=""/></a></li>
                    <li id="img4" onclick="loadimg(4);"><a href="javascript:void(0);" title="http://192.168.1.100/shopcart/template/plugin/sliderdetail/img/004.jpg"><img src="img/thumn/004.jpg" alt=""/></a></li>
                </ul>
            </div>
        </div>
        <script>
            function loadimg(flag) {
                var att = $("#img" + flag + " a").attr("title");
                var hello = "<img src=" + att + ">";
                $(".slider_img_detail_thumb ul li").removeClass("slider_img_detail_thumb_active");
                $("#img" + flag).addClass("slider_img_detail_thumb_active");
                $(".slider_img_detail_bigger").hide().html(hello).fadeIn(500);

            }
        </script>
    </body>
</html>
